<template>
  <div class="select-wrapper">
    <van-field
      class="select"
      :required="isRequired"
      :value="selected[labelName] || ''"
      :name="label"
      :label="label"
      input-align="right"
      :readonly="true"
      is-link
      :placeholder="placeholder"
      :rules="[{ validator: requireValidator, message: placeholder }]"
      @click="handleShowPopup"
    />
    <van-popup v-model="showPopup" position="bottom" round>
      <van-picker
        ref="picker"
        :title="label"
        show-toolbar
        :columns="optionList"
        :value-key="labelName"
        @cancel="handleCancel"
        @confirm="handleConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'CommonSelect',
  model: {
    prop: 'value',
    event: 'update'
  },
  props: {
    options: {
      type: Array,
      default() {
        return []
      }
    },
    optionsParam: {
      type: Object,
      default() {
        return {}
      }
    },
    optionsUrl: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    isRequired: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    labelName: {
      type: String,
      default: 'dictValue'
    },
    valueName: {
      type: String,
      default: 'dictCode'
    },
    value: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      isView: this.disabled,
      selected: {},
      showPopup: false,
      optionList: []
    }
  },
  watch: {
    disabled: {
      handler(newV, oldV) {
        // do something, 可使用this
        this.isView = newV
      },
      deep: true
    },
    value: {
      handler(newV, oldV) {
        if (newV !== oldV) {
          this.setInitValue(newV)
        }
      },
      deep: true
    }
  },
  created() {
    this.initOptions()
  },
  methods: {
    initOptions() {
      if (this.optionsUrl) {
        // 通过接口获取选项列表并设置
        this.setOptionsFromUrl()
      } else {
        // 选项列表设置
        this.optionList = this.options ? [...this.options] : []
      }
      this.setInitValue(this.value)
    },
    async setOptionsFromUrl() {
      // const [, result] = await awaitWrapper(defaultRequest(this.optionsUrl, this.optionsParam))
      // if (result && VJsonIsArray(result)) {
      //   for (let i = 0; i < result.length; i++) {
      //     this.optionList.push({ [this.valueName]: result[i][this.valueName], [this.labelName]: result[i][this.labelName] })
      //   }
      // }
    },
    setInitValue(value) {
      if (value) {
        for (let i = 0; i < this.optionList.length; i++) {
          if (
            this.optionList[i] &&
            this.optionList[i][this.valueName] === value
          ) {
            this.selected = this.optionList[i]
          }
        }
      }
    },
    handleShowPopup() {
      if (!this.isView) {
        this.showPopup = true
        if (this.selected && this.selected[this.labelName]) {
          this.$nextTick(() => {
            this.$refs.picker.setValues([this.selected[this.labelName]])
          })
        }
      }
    },
    handleConfirm(value, index) {
      this.selected = { ...value }
      this.$emit('update', value)
      this.showPopup = false
    },
    handleCancel() {
      this.showPopup = false
    },
    requireValidator() {
      if (this.isRequired) {
        return !!this.value
      } else {
        return true
      }
    }
  }
}
</script>

<style scoped lang="less">
.select-wrapper {
  position: relative;
  align-items: center;

  &::after {
    position: absolute;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    content: " ";
    pointer-events: none;
    right: 16px;
    bottom: 0;
    left: 16px;
    border-bottom: 0.01rem solid #dcdee0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    z-index: 123;
  }
}
</style>
